<template>
	<div>
		<input type="text" v-model="filePath" />
		<button @click="readExcel">读取Excel</button>
		<!-- 显示读取的数据 -->
		<table v-if="data.length">
			<thead>
				<tr>
					<th v-for="(header, index) in headers" :key="index">{{ header }}</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(row, rowIndex) in data" :key="rowIndex">
					<td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
	import * as XLSX from 'xlsx';

	export default {
		data() {
			return {
				filePath: '',
				headers: [],
				data: [],
			};
		},
		methods: {
			readExcel() {
				if (!this.filePath) {
					alert('请输入Excel文件路径');
					return;
				}

				fetch(this.filePath)
					.then(response => response.arrayBuffer())
					.then(buffer => {
						const data = new Uint8Array(buffer);
						const workbook = XLSX.read(data, {
							type: 'array'
						});
						console.log(workbook)
						const worksheet = workbook.Sheets[workbook.SheetNames[0]];

						// 解析 Excel 数据
						const jsonData = XLSX.utils.sheet_to_json(worksheet, {
							header: 1
						});

						this.headers = jsonData[0];
						this.data = jsonData.slice(1);
					})
					.catch(error => {
						console.error('读取Excel文件失败', error);
					});
			},
		}, //‪‪C:\\Users\\Asus\\Desktop\\app\\static\\012.xlsx
	};
</script>
<style>
</style>